<template>
    <div class="shopDetail">
        <p class="back">
            <i class="van-icon van-icon-arrow-left" @click="$router.go(-1)" />
        </p>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item,index) in shoplist.pics2" :key="index">
                <img :src="item" />
            </van-swipe-item>
        </van-swipe>
        <div class="detail">
            <p v-html="detail.name"></p>
            <p class="adress">{{detail.characteristic}}</p>
            <div class="flex">
                <p>
                    {{detail.recommendStatusStr}}
                    <span>￥{{detail.originalPrice}}</span>
                </p>
                <p>原价{{detail.originalPrice}}</p>
                <p>库存{{detail.stores}}</p>
            </div>
        </div>
        <div class="content">
            <van-tabs v-model="active" line-width="100px">
                <van-tab title="商品详情">
                    <div v-html="shoplist.content"></div>
                </van-tab>
                <van-tab title="商品评价">
                    <van-card
                        v-for="item in Reputation"
                        :key="item.id"
                        :desc="item.goods.goodReputationRemark"
                        :title="item.user.nick"
                    >
                        <template #thumb>
                            <i class="van-icon van-icon-user-circle-o"></i>
                        </template>
                        <template #footer>{{ item.goods.dateReputation }}</template>
                    </van-card>
                </van-tab>
            </van-tabs>
        </div>
        <!-- 提交栏 -->
        <van-submit-bar button-text="加入购物车" @submit="Add">
            <template #default>
                <div class="icon">
                    <van-icon name="service-o" size="30px" />
                    <van-icon name="shopping-cart-o" size="30px" @click="gotoShopCar" :badge="$store.state.shop.length" />
                    <van-icon name="star-o" size="30px" />
                    <van-button @click="Buy">立即购买</van-button>
                </div>
            </template>
        </van-submit-bar>

        <!-- 弹出框 -->
        <van-popup
            v-model="show"
            position="bottom"
            :style="{ height: '50%' }"
            class="popup"
            closeable
            @closed="closed"
        >
            <van-card :price="detail.originalPrice" :title="detail.name" :thumb="detail.pic" />
            <p class="typeName">{{type.name||''}}</p>
            <!-- 分类 -->
            <van-tabs type="card" v-model="typeId" @change="d">
                <van-tab
                    v-for="(item,index) in type.childsCurGoods"
                    :key="index"
                    :title="item.name||''"
                    :name="item.id"
                ></van-tab>
            </van-tabs>
            <div class="shopNum">
                <van-stepper v-model="value" />
            </div>

            <p class="btn">
                <van-button
                    color="linear-gradient(to right, #ff6034, #ee0a24)"
                    @click="handler(detail)"
                >{{buttonName}}</van-button>
            </p>
        </van-popup>
    </div>
</template>

<script>
export default {
    data() {
        return {
            shoplist: {}, //商品数据
            detail: {}, //详情
            Reputation: {}, //评价
            active: 0,
            show: false,
            type: {},
            buttonName: "",
            value: 1,
            typeName: 0, //商品类型
            typeId:0,    //商品id
            imgs:[]     //切换类型切换图片的数组
        };
    },
    watch:{
        typeId:{
            handler(){
                this.type.childsCurGoods.forEach(item => {
                    if(item.id==this.typeId){
                        // console.log(item.name);
                        this.typeName=item.name
                    }
                });                
            }

        }
    },
    methods: {
        d(val){
            console.log(val);
            this.typeId=val
        },
        Add() {
            this.show = true;
            this.buttonName = "加入购物车";
        },
        Buy() {
            this.show = true;
            this.buttonName = "购买";
        },
        // 加入购物车的方法 id:this.typeName.id代表当前类型的id
        handler(detail) {
            if(this.buttonName=='加入购物车'){
                this.$store.commit("add", { price: detail.originalPrice,id:this.typeId||'', type: this.typeName||'',num:this.value,img:detail.pic });
            }else{
                return
            }
            
        },
        gotoShopCar(){
            this.$router.push(this.$path.HomeShopCar)
        },
        closed() {},
    },
    computed: {
        // type(){
        //     if(this.shoplist.properties){
        //         return this.shoplist.properties[0]
        //     }else{
        //         return []
        //     }
        // }
    },
    mounted() {
        let id = this.$route.query.id;
        console.log(id);
        this.$API.getShopDetail({ params: { id: id } }).then((res) => {
            console.log(res.data.data);
            this.shoplist = res.data.data;
            this.detail = res.data.data.basicInfo; //商品详情
            this.type = this.shoplist.properties[0];
        });
        //获取评价
        this.$API.getShopReputation({ params: { goodsId: id } }).then((res) => {
            // console.log(res.data.data);
            this.Reputation = res.data.data;
        });
    },
};
</script>

<style lang="scss">
.shopDetail {
    width: 100%;
    .back {
        width: 8vw;
        height: 8vw;
        border-radius: 50%;
        border: 0.4vw solid white;
        text-align: center;
        line-height: 9vw;
        position: fixed;
        z-index: 999;
        i {
            width: 6vw;
            height: 6vw;
            border-radius: 50%;
            background-color: white;
            color: black;
            display: inline-block;
            line-height: 6vw;
            text-align: center;
        }
    }
    .my-swipe .van-swipe-item {
        height: 50vh;
        color: #fff;
        font-size: 20px;
        text-align: center;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .detail {
        width: 100%;
        height: 18vh;
        text-indent: 5vw;
        .adress {
            font-size: 12px;
            color: gray;
            margin: 3vh 0;
        }
        .flex {
            display: flex;
            height: 5vh;
            justify-content: space-around;
            align-items: center;
        }
    }
    .content {
        width: 100% !important;
        height: auto;
        li {
            margin-left: 3vw;
            height: 5vh;
            line-height: 5vh;
        }
        img {
            width: 100% !important;
            height: 100% !important;
        }
        .van-icon-user-circle-o {
            font-size: 40px;
        }
    }
    .icon {
        width: 70%;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .popup {
        width: 100%;

            overflow-y:unset;
        
        .typeName {
            width: 100%;
            text-align: center;
            margin: 2vh 0;
            overflow: hidden;
        }
        .van-tabs__nav--card {
            border: none;
        }
        .van-tab {
            // margin: 0 2vw;
            border: none;
        }
        .btn {
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 0;
            button {
                width: 100%;
            }
        }
        .van-tabs__nav--card {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            height: 100%;
        }
        .van-tabs--card {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
        }
        .van-tabs--card > .van-tabs__wrap {
            height: 15vh;
        }
        .van-tab__text--ellipsis {
            width: 24vw !important;
            font-size: 12px;
        }
        .shopNum {
            width: 100%;
            height: 6vh;
            position: absolute;
            left: 74vw;
            bottom: 5vh;
        }
    }
}
</style>





